<template>
  <div class="center-setting pb120 pt40 publicServe">
    <TitleCard
      :title="title"
      :showMore="false"
      :loading="loading"
      :isEmpty="isEmpty"
      :isSwitch="false"
      :type="'threeCard'"
    >
      <template slot="rightOperation">
        <div class="btn-wrap">
          <a-button class="btn-item" @click="contact">联系客服</a-button>
        </div>
      </template>
      <div class="personAuth-from">
        <a-form-model
          ref="ruleForm"
          :model="params"
          :rules="rules"
          class="joinForm"
          v-bind="layout"
        >
          <a-form-model-item ref="userName" label="用户名" prop="userName">
            <a-input
              placeholder="请输入用户名"
              v-model="params.userName"
              :disabled="true"
              @blur="
                () => {
                  $refs.userName.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item
            ref="phonenumber"
            label="手机号"
            prop="phonenumber"
          >
            <a-input
              placeholder="请输入手机号"
              v-model="params.phonenumber"
              @blur="
                () => {
                  $refs.phonenumber.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item ref="email" label="注册邮箱" prop="eamil">
            <a-input
              placeholder="请输入注册邮箱"
              v-model="params.email"
              :disabled="true"
              @blur="
                () => {
                  $refs.email.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item ref="sex" label="性别" prop="sex">
            <a-radio-group
              name="radioGroup"
              :default-value="'1'"
              v-model="params.sex"
            >
              <a-radio :value="'1'"> 男 </a-radio>
              <a-radio :value="'2'"> 女 </a-radio>
              <a-radio :value="'3'"> 保密 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item ref="adress" label="所在区域" prop="adress">
            <a-cascader
              :options="cityList"
              placeholder="请选择所在的区域"
              @change="onChange"
              v-model="params.adress"
            />
          </a-form-model-item>
          <a-form-model-item
            ref="intro"
            label="个人简介"
            prop="intro"
            :wrapper-col="introWrapper"
          >
            <a-textarea
              placeholder="请输入内容"
              :rows="4"
              v-model="params.intro"
            />
          </a-form-model-item>
          <a-form-model-item ref="qq" label="QQ" prop="qq">
            <a-input
              placeholder="请输入QQ"
              v-model="params.qq"
              @blur="
                () => {
                  $refs.qq.onFieldBlur()
                }
              "
            />
          </a-form-model-item>
        </a-form-model>
        <div class="fromBtnClass">
          <a-button
            type="primary"
            class="fromBtnClass-Btn"
            @click="confirmClick"
            >提交</a-button
          >
        </div>
      </div>
    </TitleCard>
  </div>
</template>

<script>
var reg = new RegExp(
  '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$'
) // 校验手机号
import { cityList } from '../configs/cityList'
import { personAuth } from '@/api/accountInfos'
export default {
  data() {
    return {
      cityList,
      loading: false,
      isEmpty: false,
      title: '基本信息',
      params: {
        userName: '',
        phonenumber: '',
        email: '',
        sex: '',
        intro: '',
        qq: '',
        province: '',
        city: '',
        area: '',
        adress: []
      },
      rules: {
        adress: [
          { required: true, message: '所在区域不能为空!', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空!', trigger: 'blur' }
        ],
        phonenumber: [
          { required: true, message: '手机号码不能为空!', trigger: 'blur' },
          {
            validator: (rule, val, callback) => {
              if (!reg.test(val)) {
                callback(new Error('请输入正确的手机号码!'))
              } else {
                callback()
              }
            }
          }
        ],
      },
      introWrapper: { span: 20 },
      wrapper: { span: 4 },
      layout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 8 }
      },
    }
  },
  mounted() {
    this.initSetting()
  },
  methods: {
    onChange(value) {
      this.params.province = value[0]
      this.params.city = value[1]
      this.params.area = value[2]
    },
    initSetting() {
  
      const { userName, email } = this.$route.query
      this.params.userName = userName
      this.params.email = email
    },
    confirmClick() {
      let isBreak = false
      const mustArr = ['phonenumber', 'sex', 'adress']
      for (let key in this.params) {
        if (mustArr.indexOf(key) !== -1) {
          if (this.params[key] === '' && !isBreak) {
            isBreak = true
            this.$message.warning('请完善信息!')
            return
          }
        }
      }
      Reflect.deleteProperty(this.params, 'adress')  //删除adress属性
      personAuth(this.params).then(res => {
        if (res.code === 200) {
          this.$message.success('认证成功!')
          this.$router.push({ name: 'platformPortal' })
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    contact() { }
  }
}
</script>

<style lang="scss" scoped>
.btn-item {
  height: 25px;
}
::v-deep .ant-radio-inner::after {
  //重写radio选中的样式
  background-color: #2d5acb;
}

::v-deep .ant-radio-checked .ant-radio-inner {
  border-color: #2d5acb;
}
</style>